<template>
  <div class="layout">
    <h2 class="function-header">笔记管理</h2>
    <div class=" inside-comment">
      <div class="cert-list">
        <el-card class="cert-card" v-for="item in tableData" :key="item.id">
          <template #header>
            <div class="card-header">
              <span>{{item.templateName}}</span>
            </div>
            <div class="time">
              <div class="issue-time time-item">
                <span>颁发时间：</span>
                <p v-if="item.issueDate">{{ dayjs(item.issueDate).format('YYYY-MM-DD') }}</p>
                <span v-else>-</span>
              </div>
              <div class="expire-time time-item">
                <span>到期时间：</span>
                <p v-if="item.expireDate">{{ dayjs(item.expireDate).format('YYYY-MM-DD') }}</p>
                <span v-else>-</span>
              </div>
            </div>
          </template>
          <span class="dialog-footer">
            <el-button link @click="showCert(item)" class="but">预览</el-button>
            <el-button link @click="downloadCart(item)" class="but">下载</el-button>
          </span>
        </el-card>
      </div>
      <PaginationViewSimple 
        :total="queryData.total" 
        :pageSize="queryData.pageSize" 
        :currentPage="queryData.currentPage" 
        @currentChange="handleCurrentChange" 
        @changeSize="handleSizeChange" 
        v-if="tableData.length > 9"
      />
    </div>
    <!-- 证书预览  -->
    <el-dialog v-model="templateVisible" title="证书预览" width="900px">
      <div class="template-content">
        <div v-html="templateData" class="cert-box"></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="templateVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { userPagingCert, downloadCert, userPreviewCert } from '@/api/cert'
import { tableList as mixTable } from "@ruifox-cms/utils";
import dayjs from 'dayjs'

//左侧反馈列表分页器
const { queryData, tableData, getTableData,} = mixTable({
  getListApi: userPagingCert
})
const defaultQuery = reactive({
  currentPage: 1,
  pageSize: 10,
  sort: "",
  order: "",
  userId: "",
  templateId: "",
  status: ""
})
Object.assign(queryData, defaultQuery);

const templateVisible = ref(false)
const templateData = ref()

//预览证书
const showCert = async (item) => {
  const res = await userPreviewCert({certId: item.id});
  if(res.code == 20000){
    templateData.value = res.data;
    templateVisible.value = true;
  }
}
//下载证书
const downloadCart = async (row) => {
  try {
    // 调用接口获取文件
    const res = await downloadCert({
      certId: row.id
    });
    console.log("接口返回的数据:", res);
    // 检查返回的数据是否是 Blob 类型
    const blob = new Blob([res], { type: 'application/pdf' });

    // 创建下载链接
    const url = window.URL.createObjectURL(blob);

    // 创建一个隐藏的 <a> 元素
    const link = document.createElement('a');
    link.href = url;

    // 设置下载文件名（可以根据需要动态设置）
    link.download = `${row.certNumber || '证书'}.pdf`;

    // 触发下载
    link.click();

    // 释放 URL 对象
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
}
onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.cert-list{
  display: flex;
  flex-wrap: wrap;
  margin-right: px2rem(-20);
  margin-top: px2rem(40);
  .cert-card{
    width: calc(33.33% - 0.2rem);
    margin-right: px2rem(20);
    .card-header{
      font-size: px2rem(24);
    }
    .time{
      font-size: px2rem(18);
      color: $black_2;
      margin-top: px2rem(10);
      .time-item{
        margin-top: px2rem(5);
        display: flex;
        align-items: center;
        span{
          color: #666;
        }
      }
    }
    .dialog-footer{
      .but{
        font-size: px2rem(18);
        &:hover{
          color: $mainColor;
        }
      }
    }
  }
}

.template-content{
  .cert-box{
    position: relative;
    margin: -10% 0 -10%  29%;
    transform: translate(-50%) scale(0.7);
    font-family: "SimSun", "宋体", serif !important;
  }
}
</style>